<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nth-* pseudo-class selectors</title>
    <style>
        .last-child :last-child {
            font-weight: bold;
        }

        .even_odd :nth-child(odd) {
            font-weight: bold;
        }
        .even_odd :nth-child(even) {
            font-style: italic;
        }

        .b :nth-child(0) {
            color: red;
        }
        .b :nth-child(3) {
            font-weight: bold;
        }
        .b :nth-child(-2) {
            color: red;
        }

        .a_1 :nth-child(n) {
            font-weight: bold;
        }
        .a_1 :nth-child(n+3) {
            font-style: italic;
        }
        .a_1 :nth-child(n-3) {
            color: green;
        }

        .a_3 :nth-child(3n) {
            font-weight: bold;
        }
        .a_3 :nth-child(3n+1) {
            font-style: italic;
        }
        .a_3 :nth-child(3n-1) {
            color: green;
        }

        .a_-1 :nth-child(-n) {
            color: red;
        }
        .a_-1 :nth-child(-n+1) {
            font-weight: bold;
        }
        .a_-1 :nth-child(-n-1) {
            color: red;
        }

        .a_-3 :nth-child(-3n) {
            color: red;
        }
        .a_-3 :nth-child(-3n+5) {
            font-weight: bold;
        }
        .a_-3 :nth-child(-3n-1) {
            color: red;
        }


        .even_odd_type span:nth-of-type(odd) {
            font-weight: bold;
        }
        .even_odd_type span:nth-of-type(even) {
            font-style: italic;
        }

        .b_type span:nth-of-type(0) {
            color: red;
        }
        .b_type span:nth-of-type(3) {
            font-weight: bold;
        }
        .b_type span:nth-of-type(-2) {
            color: red;
        }

        .a_1_type span:nth-of-type(n) {
            font-weight: bold;
        }
        .a_1_type span:nth-of-type(n+3) {
            font-style: italic;
        }
        .a_1_type span:nth-of-type(n-3) {
            color: green;
        }

        .a_3_type span:nth-of-type(3n) {
            font-weight: bold;
        }
        .a_3_type span:nth-of-type(3n+1) {
            font-style: italic;
        }
        .a_3_type span:nth-of-type(3n-1) {
            color: green;
        }

        .a_-1_type span:nth-of-type(-n) {
            color: red;
        }
        .a_-1_type span:nth-of-type(-n+1) {
            font-weight: bold;
        }
        .a_-1_type span:nth-of-type(-n-1) {
            color: red;
        }

        .a_-3_type span:nth-of-type(-3n) {
            color: red;
        }
        .a_-3_type span:nth-of-type(-3n+5) {
            font-weight: bold;
        }
        .a_-3_type span:nth-of-type(-3n-1) {
            color: red;
        }


        .even_odd_last :nth-last-child(odd) {
            font-weight: bold;
        }
        .even_odd_last :nth-last-child(even) {
            font-style: italic;
        }

        .b_last :nth-last-child(0) {
            color: red;
        }
        .b_last :nth-last-child(3) {
            font-weight: bold;
        }
        .b_last :nth-last-child(-2) {
            color: red;
        }

        .a_1_last :nth-last-child(n) {
            font-weight: bold;
        }
        .a_1_last :nth-last-child(n+3) {
            font-style: italic;
        }
        .a_1_last :nth-last-child(n-3) {
            color: green;
        }

        .a_3_last :nth-last-child(3n) {
            font-weight: bold;
        }
        .a_3_last :nth-last-child(3n+1) {
            font-style: italic;
        }
        .a_3_last :nth-last-child(3n-1) {
            color: green;
        }

        .a_-1_last :nth-last-child(-n) {
            color: red;
        }
        .a_-1_last :nth-last-child(-n+1) {
            font-weight: bold;
        }
        .a_-1_last :nth-last-child(-n-1) {
            color: red;
        }

        .a_-3_last :nth-last-child(-3n) {
            color: red;
        }
        .a_-3_last :nth-last-child(-3n+5) {
            font-weight: bold;
        }
        .a_-3_last :nth-last-child(-3n-1) {
            color: red;
        }


        .even_odd_last_type span:nth-last-of-type(odd) {
            font-weight: bold;
        }
        .even_odd_last_type span:nth-last-of-type(even) {
            font-style: italic;
        }

        .b_last_type span:nth-last-of-type(0) {
            color: red;
        }
        .b_last_type span:nth-last-of-type(3) {
            font-weight: bold;
        }
        .b_last_type span:nth-last-of-type(-2) {
            color: red;
        }

        .a_1_last_type span:nth-last-of-type(n) {
            font-weight: bold;
        }
        .a_1_last_type span:nth-last-of-type(n+3) {
            font-style: italic;
        }
        .a_1_last_type span:nth-last-of-type(n-3) {
            color: green;
        }

        .a_3_last_type span:nth-last-of-type(3n) {
            font-weight: bold;
        }
        .a_3_last_type span:nth-last-of-type(3n+1) {
            font-style: italic;
        }
        .a_3_last_type span:nth-last-of-type(3n-1) {
            color: green;
        }

        .a_-1_last_type span:nth-last-of-type(-n) {
            color: red;
        }
        .a_-1_last_type span:nth-last-of-type(-n+1) {
            font-weight: bold;
        }
        .a_-1_last_type span:nth-last-of-type(-n-1) {
            color: red;
        }

        .a_-3_last_type span:nth-last-of-type(-3n) {
            color: red;
        }
        .a_-3_last_type span:nth-last-of-type(-3n+5) {
            font-weight: bold;
        }
        .a_-3_last_type span:nth-last-of-type(-3n-1) {
            color: red;
        }


        .first-of-type span:first-of-type {
            font-weight: bold;
        }


        .last-of-type span:last-of-type {
            font-weight: bold;
        }


        .only-child span:only-child {
            font-weight: bold;
        }


        .only-of-type span:only-of-type {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="last-child">
    (:last-child) Only 5 should be bold:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span>
</div>

<div class="even_odd">
    (:nth-child(odd|even)) Bold and italic are applied alternatively:
    <span>bold</span>
    <span>italic</span>
    <span>bold</span>
    <span>italic</span>
</div>
<div class="b">
    (:nth-child(b)) Only 3 should be bold:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div class="a_1">
    (:nth-child(n+b)) All bold, 3 and 4 are italic, All green:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span>
</div>
<div class="a_3">
    (:nth-child(3n+b)) 3 and 6 bold, 1 and 4 italic, 2 and 5 green:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div class="a_-1">
    (:nth-child(-n+b)) Only 1 should be bold:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div class="a_-3">
    (:nth-child(-3n+b)) 2 and 5 bold:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>

<div class="even_odd_type">
    (:nth-of-type(odd|even))
    <span>bold</span>
    <span>italic</span>
    <div style="display: inline">(regular)</div>
    <span>bold</span>
    <span>italic</span>
</div>
<div class="b_type">
    (:nth-of-type(b)) Only 3 should be bold:
    <span>1</span> <span>2</span> <div style="display: inline">other</div> <span>3</span> <span>4</span> <span>5</span>
</div>
<div class="a_1_type">
    (:nth-of-type(n+b)) All bold, 3 and 4 are italic, All green:
    <span>1</span> <span>2</span> <div style="display: inline">other (not green)</div> <span>3</span> <span>4</span>
</div>
<div class="a_3_type">
    (:nth-of-type(3n+b)) 3 and 6 bold, 1 and 4 italic, 2 and 5 green:
    <span>1</span> <div style="display: inline">other</div> <span>2</span> <span>3</span> <span>4</span> <div style="display: inline">other</div> <span>5</span> <span>6</span>
</div>
<div class="a_-1_type">
    (:nth-of-type(-n+b)) Only 1 should be bold:
    <div style="display: inline">other</div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div class="a_-3_type">
    (:nth-of-type(-3n+b)) 2 and 5 bold:
    <span>1</span> <div style="display: inline">other</div> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>

<div class="even_odd_last">
    (:nth-last-child(odd|even)) Bold and italic are applied alternatively:
    <span>italic</span>
    <span>bold</span>
    <span>italic</span>
    <span>bold</span>
</div>
<div class="b_last">
    (:nth-last-child(b)) Only 4 should be bold:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div class="a_1_last">
    (:nth-last-child(n+b)) All bold, 1 and 2 are italic, All green:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span>
</div>
<div class="a_3_last">
    (:nth-last-child(3n+b)) 1 and 4 bold, 3 and 6 italic, 2 and 5 green:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div class="a_-1_last">
    (:nth-last-child(-n+b)) Only 6 should be bold:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div class="a_-3_last">
    (:nth-last-child(-3n+b)) 2 and 5 bold:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>

<div class="even_odd_last_type">
    (:nth-last-of-type(odd|even))
    <span>italic</span>
    <span>bold</span>
    <span>italic</span>
    <div style="display: inline">(regular)</div>
    <span>bold</span>
</div>
<div class="b_last_type">
    (:nth-last-of-type(b)) Only 3 should be bold:
    <span>1</span> <span>2</span> <span>3</span> <span>4</span> <div style="display: inline">other</div> <span>5</span>
</div>
<div class="a_1_last_type">
    (:nth-last-of-type(n+b)) All bold, 1 and 2 are italic, All green:
    <span>1</span> <span>2</span> <div style="display: inline">other (not green)</div> <span>3</span> <span>4</span>
</div>
<div class="a_3_last_type">
    (:nth-last-of-type(3n+b)) 1 and 4 bold, 3 and 6 italic, 2 and 5 green:
    <span>1</span> <div style="display: inline">other</div> <span>2</span> <span>3</span> <span>4</span> <div style="display: inline">other</div> <span>5</span> <span>6</span>
</div>
<div class="a_-1_last_type">
    (:nth-last-of-type(-n+b)) Only 6 should be bold:
    <div style="display: inline">other</div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div class="a_-3_last_type">
    (:nth-last-of-type(-3n+b)) 2 and 5 bold:
    <span>1</span> <div style="display: inline">other</div> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>

<div class="first-of-type">
    (:first-of-type) Only 1 should be bold:
    <div style="display: inline">other</div> <span>1</span> <span>2</span>
</div>

<div class="last-of-type">
    (:last-of-type) Only 2 should be bold:
    <span>1</span> <span>2</span> <div style="display: inline">other</div>
</div>

<div class="only-child">
    (:only-child) "bold" should be bold:
    <span>bold</span>
</div>
<div class="only-child">
    (:only-child) there should not be any bold element:
    <div style="display: inline">other</div> <span>regular</span> <div style="display: inline">other</div>
</div>

<div class="only-of-type">
    (:only-of-type) "bold" should be bold:
    <div style="display: inline">other</div> <span>bold</span> <div style="display: inline">other</div>
</div>
<div class="only-of-type">
    (:only-of-type) there should not be any bold element:
    <div style="display: inline">other</div> <span>regular</span> <div style="display: inline">other</div> <span>regular</span>
</div>
</body>
</html>